<template>
  <div>
    <!-- 打印 -->
    <el-button
        size="mini"
        class="el-icon-printer"
        @click="printJson"
    ></el-button>

  <div id="myChart" style="width: 100%;height: 300px;">
    
  </div>
  </div>
</template>
 
<script type="text/javascript">
import printJS from 'print-js';
import * as echarts from "echarts"
export default {
    name:'print',
  data() {
    return {
      list:[
        
      ],
    };
  },
  methods: {
    printJson() {
        console.log(111)
          printJS({
            printable: this.list,//this.list是从后台接口获取的数据，未展示
            properties: [
              { field: "CREATED_TIME", displayName: "创建时间" },
              { field: "LoginName", displayName: "用户" },
              { field: "Staff_Name", displayName: "姓名" },
              { field: "CREATED_BY", displayName: "创建人" },
              { field: "Staff_Memo", displayName: "备注" },
            ],
            type: "json",
            header: "人员管理信息",
          });
    },
    //初始化饼状图数据
    initData() {
      var myChart = echarts.init(document.getElementById('myChart'));
      myChart.setOption({
          title : {
              text: '学生成绩统计',//主标题
              // subtext: '纯属虚构',//副标题
              x:'center',//x轴方向对齐方式
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              bottom: 'bottom',
              data: ['90-100','80-89','70-79','60-69','0-59']
          },
          series : [
              {
                  name: '成绩',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:[
                      {value:335, name:'90-100'},
                      {value:310, name:'80-89'},
                      {value:234, name:'70-79'},
                      {value:135, name:'60-69'},
                      {value:1548, name:'0-59'}
                  ],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      });
    },       
  },
  mounted() {
    this.initData();
  },
};
</script>